<template>
  <div class="statistician-management">
    <h2>疾控统计员管理</h2>
    
    <!-- 操作区域 -->
    <div class="action-section mb-4">
      <el-button type="primary" @click="handleAddClick">
        <i class="el-icon-plus"></i> 新增统计员
      </el-button>
    </div>
    
    <!-- 筛选区域：使用Element Plus表单组件 -->
    <el-form 
      :model="filters" 
      class="filter-section" 
      inline 
      label-width="90px"
    >
      <el-form-item label="统计员姓名" prop="user_name">
        <el-input 
          v-model="filters.user_name" 
          placeholder="请输入姓名" 
          clearable
          @clear="resetFilters"
        ></el-input>
      </el-form-item>
      
      <el-form-item label="所属单位" prop="unit">
        <el-select 
          v-model="filters.unit" 
          placeholder="请选择所属单位"
          clearable
          filterable
          remote
          :remote-method="handleRemoteMethod"
          :loading="unitLoading"
        >
          <el-option 
            v-for="unit in unitOptions" 
            :key="unit" 
            :label="unit" 
            :value="unit"
          ></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="账号状态" prop="status">
        <el-select 
          v-model="filters.status" 
          placeholder="请选择状态"
          clearable
        >
          <el-option value="all">全部状态</el-option>
          <el-option :value="'0'">待审核</el-option>
          <el-option :value="'1'">正常</el-option>
          <el-option :value="'2'">禁用</el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="searchStatisticians">搜索</el-button>
      </el-form-item>
      
      <el-form-item>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>
    
    <!-- 表格区域：使用Element Plus表格 -->
    <div class="statistician-table-container">
      <el-table 
        v-loading="loading" 
        :data="paginatedStatisticians" 
        border 
        stripe 
        style="width: 100%"
        :empty-text="error || '暂无数据'"
      >
        <el-table-column type="index" label="序号" align="center" width="80">
        </el-table-column>
        
        <el-table-column label="统计员姓名" prop="userName" align="center">
          <template #default="scope">
            {{ scope.row.userName || '-' }}
          </template>
        </el-table-column>
        
        <el-table-column label="所属单位" prop="unit" align="center">
          <template #default="scope">
            {{ scope.row.unit || '-' }}
          </template>
        </el-table-column>
        
        <el-table-column label="联系电话" prop="phone" align="center">
          <template #default="scope">
            {{ scope.row.phone || '-' }}
          </template>
        </el-table-column>
        
        <el-table-column label="账号状态" align="center">
          <template #default="scope">
            <el-tag 
              :type="getStatusType(scope.row.status)"
            >
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" align="center" width="350">
          <template #default="scope">
            <el-button 
              type="primary" 
              size="small" 
              @click="viewStatisticianDetails(scope.row)"
            >
              查看详情
            </el-button>
            <el-button 
              type="info" 
              size="small" 
              @click="resetPassword(scope.row)"
              style="margin-left: 8px"
            >
              重置密码
            </el-button>
            <el-button 
              v-if="scope.row.status === 1" 
              type="warning" 
              size="small" 
              @click="toggleStatus(scope.row, 2)"
              style="margin-left: 8px"
            >
              禁用账号
            </el-button>
            <el-button 
              v-else-if="scope.row.status === 2" 
              type="success" 
              size="small" 
              @click="toggleStatus(scope.row, 1)"
              style="margin-left: 8px"
            >
              启用账号
            </el-button>
            <el-button 
              type="danger" 
              size="small" 
              @click="deleteStatistician(scope.row)"
              style="margin-left: 8px"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <!-- 分页区域：使用Element Plus分页 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filteredStatisticians.length"
      ></el-pagination>
    </div>
    
    <!-- 查看详情弹窗 -->
    <el-dialog 
      title="统计员详情" 
      v-model="showDetailsModal" 
      width="500px"
      @close="closeDetailsModal"
    >
      <div class="details-content">
        <el-descriptions border :column="1">
          <el-descriptions-item label="姓名">
            {{ currentStatistician.userName || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            {{ currentStatistician.gender || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="年龄">
            {{ currentStatistician.age || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="联系电话">
            {{ currentStatistician.phone || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="所属单位">
            {{ currentStatistician.unit || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="账号状态">
            <el-tag :type="getStatusType(currentStatistician.status)">
              {{ getStatusText(currentStatistician.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ formatTime(currentStatistician.createTime) || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ formatTime(currentStatistician.updateTime) || '-' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <el-button @click="closeDetailsModal">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 新增统计员弹窗：使用Element Plus对话框 -->
    <el-dialog 
      title="新增统计员" 
      v-model="showAddModal" 
      width="500px"
      @close="closeAddModal"
    >
      <div class="modal-body">
        <el-form :model="newStatistician" :rules="addRules" ref="addFormRef">
          <el-form-item label="姓名" prop="userName" required>
            <el-input 
              v-model="newStatistician.userName"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender" required>
            <el-radio-group v-model="newStatistician.gender">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄" prop="age" required>
            <el-input 
              v-model.number="newStatistician.age"
              placeholder="请输入年龄"
              type="number"
              :min="1"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone" required>
            <el-input 
              v-model="newStatistician.phone"
              placeholder="请输入手机号"
              type="tel"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属单位" prop="unit" required>
            <el-select 
              v-model="newStatistician.unit"
              placeholder="请输入或选择所属单位"
              filterable
              clearable
              allow-create
              :remote-method="handleRemoteMethod"
              :loading="unitLoading"
            >
              <el-option 
                v-for="unit in unitOptions" 
                :key="unit" 
                :label="unit" 
                :value="unit"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="初始密码" prop="password" required>
            <el-input 
              v-model="newStatistician.password"
              placeholder="请设置初始密码（至少6位）"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item label="账号状态" prop="status">
            <el-select 
              v-model="newStatistician.status"
              placeholder="请选择状态"
            >
              <el-option :value="0">待审核</el-option>
              <el-option :value="1">正常</el-option>
              <el-option :value="2">禁用</el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div v-if="formError" class="error-message">
          {{ formError }}
        </div>
      </div>
      <template #footer>
        <el-button @click="closeAddModal">取消</el-button>
        <el-button type="primary" @click="saveNewStatistician">保存</el-button>
      </template>
    </el-dialog>
    
    <!-- 重置密码弹窗：使用Element Plus对话框 -->
    <el-dialog 
      title="重置密码" 
      v-model="showResetPasswordModal" 
      width="400px"
      @close="closeResetPasswordModal"
    >
      <div class="reset-pwd-content">
        <p>确定要重置统计员 <span class="user-name">{{ resetTargetStat?.userName }}</span> 的密码吗？</p>
        <el-alert 
          title="重置后的密码将默认为：123456" 
          type="warning" 
          show-icon 
          style="margin-top: 16px"
        ></el-alert>
      </div>
      <template #footer>
        <el-button @click="closeResetPasswordModal">取消</el-button>
        <el-button type="primary" @click="confirmResetPassword">确认重置</el-button>
      </template>
    </el-dialog>
    
    <!-- 账号状态操作弹窗：使用Element Plus对话框 -->
    <el-dialog 
      :title="statusActionText" 
      v-model="showStatusModal" 
      width="400px"
      @close="closeStatusModal"
    >
      <div class="status-action-content">
        <p>确定要{{ statusActionText }}统计员 <span class="user-name">{{ statusTargetStat?.userName }}</span> 的账号吗？</p>
        <el-alert 
          v-if="statusAction === '禁用账号'"
          title="禁用后该统计员将无法登录系统，请谨慎操作！" 
          type="warning" 
          show-icon 
          style="margin-top: 16px"
        ></el-alert>
      </div>
      <template #footer>
        <el-button @click="closeStatusModal">取消</el-button>
        <el-button type="primary" @click="confirmStatusChange">{{ statusActionText }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import api from '@/utils/axiosConfig'
// 引入Element Plus组件
import { 
  ElTable, ElTableColumn, ElButton, ElForm, ElFormItem, 
  ElInput, ElSelect, ElOption, ElPagination, ElDialog, 
  ElTag, ElAlert, ElMessage, ElMessageBox, ElDescriptions, 
  ElDescriptionsItem, ElRadio, ElRadioGroup 
} from 'element-plus'

export default {
  name: 'StatisticianManagement',
  components: {
    ElTable, ElTableColumn, ElButton, ElForm, ElFormItem,
    ElInput, ElSelect, ElOption, ElPagination, ElDialog,
    ElTag, ElAlert, ElMessage, ElMessageBox, ElDescriptions,
    ElDescriptionsItem, ElRadio, ElRadioGroup
  },
  setup() {
    const currentPage = ref(1)
    const pageSize = ref(10)
    const showAddModal = ref(false)
    const showResetPasswordModal = ref(false)
    const showStatusModal = ref(false)
    const showDetailsModal = ref(false)
    const formError = ref('')
    const resetTargetStat = ref({})
    const statusTargetStat = ref({})
    const currentStatistician = ref({})
    const statusAction = ref('')
    const addFormRef = ref(null)
    const unitLoading = ref(false)
    const unitOptions = ref([])
    
    // 筛选条件
    const filters = reactive({
      user_name: '',
      unit: '',
      status: 'all'
    })
    
    // 新增统计员表单
    const newStatistician = reactive({
      userName: '',
      gender: 1,
      age: null,
      phone: '',
      unit: '',
      password: '',
      status: 1,
      userType: 2
    })
    
    // 表单验证规则
    const addRules = {
      userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
      age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { type: 'number', min: 1, max: 150, message: '年龄必须在1-150之间', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
      ],
      unit: [{ required: true, message: '请选择所属单位', trigger: 'change' }],
      password: [
        { required: true, message: '请设置初始密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
      ]
    }
    
    // 统计员列表数据
    const statisticians = ref([])
    const loading = ref(false)
    const error = ref('')
    
    // 格式化时间
    const formatTime = (timeString) => {
      if (!timeString) return '-'  
      try {
        const date = new Date(timeString)
        return date.toLocaleString('zh-CN', { 
          year: 'numeric', 
          month: '2-digit', 
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        })
      } catch (e) {
        console.error('时间格式化错误:', e)
        return timeString
      }
    }
    
    // 获取统计员列表
    const fetchStatisticians = async () => {
      loading.value = true
      error.value = ''
      try {
        const response = await api.get('/user/list')
        let allUsers = Array.isArray(response.data) ? response.data : []
        
        // 筛选疾控统计员（userType为2）并添加必要的显示字段
        statisticians.value = allUsers
          .filter(user => user.userType === 2)
          .map((user, index) => {
            return {
              ...user,
              gender: user.gender !== undefined && user.gender !== null && user.gender !== '' 
                ? user.gender 
                : index % 2 === 0 ? '男' : '女',
              age: user.age || (25 + index % 15)
            }
          })
        
        // 获取所有单位列表用于下拉选择
        const units = new Set(statisticians.value.map(user => user.unit).filter(Boolean))
        unitOptions.value = Array.from(units)
      } catch (err) {
        console.error('获取统计员列表失败:', err)
        error.value = '获取统计员列表失败，请稍后重试'
      } finally {
        loading.value = false
      }
    }
    
    // 远程搜索单位
    const handleRemoteMethod = (query) => {
      if (query !== '') {
        unitLoading.value = true
        // 模拟远程搜索，实际项目中可以调用后端API
        setTimeout(() => {
          unitLoading.value = false
          const filtered = Array.from(new Set(statisticians.value.map(user => user.unit).filter(unit => 
            unit && unit.toLowerCase().includes(query.toLowerCase())
          )))
          unitOptions.value = filtered
        }, 200)
      } else {
        unitOptions.value = Array.from(new Set(statisticians.value.map(user => user.unit).filter(Boolean)))
      }
    }
    
    // 获取状态文本
    const getStatusText = (status) => {
      const statusMap = {
        0: '待审核',
        1: '正常',
        2: '禁用'
      }
      return statusMap[status] || '未知状态'
    }
    
    // 获取状态类型
    const getStatusType = (status) => {
      const typeMap = {
        0: 'warning',
        1: 'success',
        2: 'danger'
      }
      return typeMap[status] || 'info'
    }
    
    // 筛选后的统计员列表（不带分页）
    const filteredStatisticians = computed(() => {
      let result = [...statisticians.value]
      
      // 按姓名筛选
      if (filters.user_name) {
        const searchTerm = filters.user_name.toLowerCase()
        result = result.filter(s => 
          s.userName && s.userName.toLowerCase().includes(searchTerm)
        )
      }
      
      // 按单位筛选
      if (filters.unit) {
        result = result.filter(s => s.unit === filters.unit)
      }
      
      // 按状态筛选
      if (filters.status !== 'all') {
        result = result.filter(s => String(s.status) === filters.status)
      }
      
      return result
    })
    
    // 分页后的统计员列表
    const paginatedStatisticians = computed(() => {
      const startIndex = (currentPage.value - 1) * pageSize.value
      return filteredStatisticians.value.slice(startIndex, startIndex + pageSize.value)
    })
    
    // 分页大小改变
    const handleSizeChange = (val) => {
      pageSize.value = val
      currentPage.value = 1 // 重置到第一页
    }
    
    // 当前页改变
    const handleCurrentChange = (val) => {
      currentPage.value = val
    }
    
    const statusActionText = computed(() => {
      return statusAction.value
    })
    
    // 搜索统计员
    const searchStatisticians = () => {
      currentPage.value = 1
    }
    
    // 重置筛选条件
    const resetFilters = () => {
      filters.user_name = ''
      filters.unit = ''
      filters.status = 'all'
      currentPage.value = 1
    }
    
    // 处理新增按钮点击
    const handleAddClick = () => {
      showAddModal.value = true
    }
    
    // 关闭新增弹窗
    const closeAddModal = () => {
      showAddModal.value = false
      formError.value = ''
      // 重置表单
      if (addFormRef.value) {
        addFormRef.value.resetFields()
      }
      Object.assign(newStatistician, {
        userName: '',
        gender: 1,
        age: null,
        phone: '',
        unit: '',
        password: '',
        status: 1,
        userType: 2
      })
    }
    
    // 保存新增统计员
    const saveNewStatistician = async () => {
      if (!addFormRef.value) return
      
      try {
        await addFormRef.value.validate()
        await api.post('/user', {
          ...newStatistician
        })
        ElMessage.success('统计员创建成功！')
        closeAddModal()
        fetchStatisticians()
      } catch (err) {
        if (err.message) {
          // 表单验证失败的错误
          return
        }
        console.error('创建统计员失败:', err)
        ElMessage.error('创建统计员失败，请稍后重试')
      }
    }
    
    // 查看统计员详情
    const viewStatisticianDetails = (statistician) => {
      currentStatistician.value = { ...statistician }
      showDetailsModal.value = true
    }
    
    // 关闭详情弹窗
    const closeDetailsModal = () => {
      showDetailsModal.value = false
      currentStatistician.value = {}
    }
    
    // 切换状态
    const toggleStatus = (statistician, targetStatus) => {
      const numericTargetStatus = Number(targetStatus)
      
      if (targetStatus === 0 || targetStatus === '0') {
        statusAction.value = '标记为待审核'
      } else if (targetStatus === 1 || targetStatus === '1') {
        statusAction.value = '启用账号'
      } else if (targetStatus === 2 || targetStatus === '2') {
        statusAction.value = '禁用账号'
      }
      
      statusTargetStat.value = { ...statistician, targetStatus: numericTargetStatus }
      showStatusModal.value = true
    }
    
    // 关闭状态弹窗
    const closeStatusModal = () => {
      showStatusModal.value = false
      statusTargetStat.value = {}
    }
    
    // 确认状态变更
    const confirmStatusChange = async () => {
      try {
        const userData = {
          userId: statusTargetStat.value.userId,
          userName: statusTargetStat.value.userName,
          status: statusTargetStat.value.targetStatus,
          phone: statusTargetStat.value.phone || '',
          gender: statusTargetStat.value.gender || 1,
          age: statusTargetStat.value.age || 0,
          unit: statusTargetStat.value.unit || '',
          userType: 2
        }
        
        await api.put('/user', userData)
        ElMessage.success(`统计员账号已${statusAction.value}！`)
        closeStatusModal()
        fetchStatisticians()
      } catch (err) {
        console.error(`${statusAction.value}失败:`, err)
        console.error('错误详情:', err.response?.data || err.message)
        ElMessage.error(`${statusAction.value}失败，请稍后重试`)
      }
    }
    
    // 重置密码
    const resetPassword = (statistician) => {
      resetTargetStat.value = { ...statistician }
      showResetPasswordModal.value = true
    }
    
    // 关闭重置密码弹窗
    const closeResetPasswordModal = () => {
      showResetPasswordModal.value = false
      resetTargetStat.value = {}
    }
    
    // 确认重置密码
    const confirmResetPassword = async () => {
      let userId = resetTargetStat.value?.userId
      
      if (userId === undefined || userId === null || userId === '') {
        console.error('缺少有效的用户ID')
        ElMessage.warning('用户信息不完整，无法重置密码')
        return
      }
      
      try {
        const response = await api.post('/user/changePassword', {
          userId: userId,
          oldPassword: resetTargetStat.value.password || '',
          newPassword: '123456'
        })
        
        showResetPasswordModal.value = false
        ElMessage.success(`用户 ${resetTargetStat.value.userName} 的密码已重置为默认密码`)
        resetTargetStat.value = {}
      } catch (err) {
        console.error('重置密码失败:', err)
        console.error('错误详情:', err.response?.data || err.message)
        ElMessage.error('重置密码失败，请稍后重试')
      }
    }
    
    // 删除统计员
    const deleteStatistician = async (statistician) => {
      try {
        const userId = statistician.userId
        if (!userId) {
          ElMessage.warning('无法获取用户ID，删除失败')
          return
        }
        
        await ElMessageBox.confirm(
          `确定要删除统计员 ${statistician.userName} 的账号吗？删除后将无法恢复！`,
          '删除确认',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        
        await api.delete(`/user/${userId}`)
        ElMessage.success('统计员账号已删除！')
        fetchStatisticians()
      } catch (err) {
        if (err === 'cancel' || err.name === 'CanceledError') {
          return
        }
        console.error('删除统计员失败:', err)
        console.error('错误详情:', err.response?.data || err.message)
        ElMessage.error('删除失败，请稍后重试')
      }
    }
    
    // 页面加载时获取数据
    onMounted(() => {
      fetchStatisticians()
    })
    
    return {
      filters,
      statisticians,
      filteredStatisticians,
      paginatedStatisticians,
      currentPage,
      pageSize,
      showAddModal,
      showResetPasswordModal,
      showStatusModal,
      showDetailsModal,
      newStatistician,
      currentStatistician,
      formError,
      resetTargetStat,
      statusTargetStat,
      statusActionText,
      addFormRef,
      addRules,
      loading,
      error,
      unitLoading,
      unitOptions,
      formatTime,
      fetchStatisticians,
      searchStatisticians,
      resetFilters,
      handleRemoteMethod,
      getStatusText,
      getStatusType,
      handleAddClick,
      closeAddModal,
      saveNewStatistician,
      viewStatisticianDetails,
      closeDetailsModal,
      toggleStatus,
      closeStatusModal,
      confirmStatusChange,
      resetPassword,
      closeResetPasswordModal,
      confirmResetPassword,
      deleteStatistician,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
/* 管理端样式重置 */
:root {
  --primary-color: #1890ff;
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #f5222d;
  --border-color: #d9d9d9;
  --bg-color: #f0f2f5;
  --text-color: #333;
  --text-secondary: #666;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 图标样式（模拟） */
.icon-plus::before { content: '+'; margin-right: 4px; }
.icon-search::before { content: '🔍'; margin-right: 4px; }
.icon-refresh::before { content: '🔄'; margin-right: 4px; }
.icon-edit::before { content: '📝'; margin-right: 4px; }
.icon-disable::before { content: '🚫'; margin-right: 4px; }
.icon-enable::before { content: '✅'; margin-right: 4px; }
.icon-key::before { content: '🔑'; margin-right: 4px; }
.icon-delete::before { content: '🗑️'; margin-right: 4px; }
.icon-warning::before { content: '⚠️'; margin-right: 4px; }

.statistician-management {
  background-color: #fff;
  border-radius: 4px;
  padding: 24px;
  box-shadow: var(--shadow);
  margin: 0 24px;
}

.statistician-management h2 {
  color: var(--text-color);
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 12px;
}

/* 操作区域 */
.action-section {
  margin-bottom: 24px;
  text-align: right;
}

.add-btn {
  padding: 8px 24px;
  background-color: var(--success-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
}

.add-btn:hover {
  background-color: #73d13d;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(82, 196, 26, 0.3);
}

/* 筛选区域 */
.filter-section {
  margin-bottom: 24px;
  padding: 16px 20px;
  background-color: var(--bg-color);
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.filter-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-group label {
  color: var(--text-secondary);
  white-space: nowrap;
  font-weight: 500;
  font-size: 14px;
}

.filter-group input,
.filter-group select {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  min-width: 160px;
  font-size: 14px;
  transition: all 0.3s;
}

.filter-group input:focus,
.filter-group select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 按钮样式 */
.search-btn,
.reset-btn,
.edit-btn,
.toggle-status-btn,
.reset-pwd-btn,
.delete-btn,
.save-btn,
.cancel-btn,
.confirm-btn {
  padding: 6px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-btn {
  background-color: var(--primary-color);
  color: #fff;
}

.search-btn:hover {
  background-color: #40a9ff;
  transform: translateY(-1px);
}

.reset-btn {
  background-color: #fff;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.reset-btn:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* 表格样式 */
.statistician-table-container {
  overflow-x: auto;
  margin-bottom: 24px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #1890ff;
  font-size: 16px;
}

.error-message {
  text-align: center;
  padding: 20px;
  color: #ff4d4f;
  background-color: #fff2f0;
  border-radius: 4px;
  margin: 20px 0;
}


.statistician-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
}

.statistician-table th,
.statistician-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}

.statistician-table th {
  background-color: #fafafa;
  color: var(--text-color);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
}

.statistician-table tr:hover {
  background-color: #fafafa;
}

.statistician-table tr:last-child td {
  border-bottom: none;
}

.empty-message {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 14px;
}

/* 状态标签 */
.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}

.status-badge.active {
  background-color: #e6f7ff;
  color: var(--primary-color);
  border: 1px solid #91d5ff;
}

.status-badge.inactive {
  background-color: #f5f5f5;
  color: #999;
  border: 1px solid #d9d9d9;
}

/* 操作按钮区域 */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.edit-btn {
  background-color: var(--primary-color);
  color: #fff;
}

.edit-btn:hover {
  background-color: #40a9ff;
}

.toggle-status-btn {
  border: 1px solid transparent;
}

.toggle-status-btn.active {
  background-color: #fff2e8;
  color: var(--warning-color);
  border-color: #ffd591;
}

.toggle-status-btn.active:hover {
  background-color: var(--warning-color);
  color: #fff;
}

.toggle-status-btn.inactive {
  background-color: #e6f7ff;
  color: var(--primary-color);
  border-color: #91d5ff;
}

.toggle-status-btn.inactive:hover {
  background-color: var(--primary-color);
  color: #fff;
}

.reset-pwd-btn {
  background-color: #f0f9ff;
  color: var(--primary-color);
  border: 1px solid #91d5ff;
}

.reset-pwd-btn:hover {
  background-color: var(--primary-color);
  color: #fff;
}

.delete-btn {
  background-color: #fff2f0;
  color: var(--error-color);
  border: 1px solid #ffccc7;
}

.delete-btn:hover {
  background-color: var(--error-color);
  color: #fff;
}

/* 分页样式 - 适配Element Plus分页器 */
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding: 16px;
  background-color: #fafafa;
  border-radius: 4px;
  border-top: 1px solid var(--border-color);
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  background-color: #fff;
  border-radius: 6px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color);
  background-color: #fafafa;
  border-radius: 6px 6px 0 0;
}

.modal-header h4 {
  color: var(--text-color);
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #999;
  cursor: pointer;
  transition: color 0.3s;
  padding: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.close-btn:hover {
  color: var(--text-color);
  background-color: #f0f0f0;
}

.modal-body {
  padding: 24px;
}

/* 表单样式 */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 14px;
}

.required {
  color: var(--error-color);
  margin-left: 4px;
}

.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.error-message {
  color: var(--error-color);
  margin-bottom: 15px;
  font-size: 14px;
  padding: 8px 12px;
  background-color: #fff2f0;
  border: 1px solid #ffccc7;
  border-radius: 4px;
}

/* 弹窗内容样式 */
.reset-pwd-info,
.status-action-info {
  color: var(--text-color);
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.6;
}

.reset-pwd-tip {
  color: var(--warning-color);
  font-size: 14px;
  background-color: #fff7e6;
  padding: 12px;
  border-radius: 4px;
  border-left: 4px solid var(--warning-color);
}

.status-action-tip {
  color: var(--warning-color);
  font-size: 14px;
  background-color: #fff7e6;
  padding: 12px;
  border-radius: 4px;
  border-left: 4px solid var(--warning-color);
  display: flex;
  align-items: center;
  line-height: 1.6;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
}

.save-btn {
  background-color: var(--success-color);
  color: #fff;
}

.save-btn:hover {
  background-color: #73d13d;
}

.cancel-btn {
  background-color: #fff;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.cancel-btn:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.confirm-btn {
  background-color: var(--primary-color);
  color: #fff;
}

.confirm-btn:hover {
  background-color: #40a9ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .statistician-management {
    margin: 0 12px;
    padding: 16px;
  }
  
  .filter-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-group {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 12px;
  }
  
  .filter-group input,
  .filter-group select {
    min-width: auto;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 6px;
  }
  
  .action-buttons button {
    justify-content: center;
  }
  
  .modal-content {
    width: 95%;
    margin: 20px;
  }
}
</style>